<template>
  <div class="same-europe-18w-page">
    <!-- 搜索区域 -->
    <el-card class="search-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span>同赔合理性分析</span>
          <el-button 
            type="text" 
            @click="store.toggleSearch"
            :icon="store.isSearchCollapsed ? 'ArrowDown' : 'ArrowUp'"
          >
            {{ store.isSearchCollapsed ? '展开' : '收起' }}
          </el-button>
        </div>
      </template>
      
      <el-collapse-transition>
        <div v-show="!store.isSearchCollapsed">
          <el-form 
            :model="store.searchForm" 
            :inline="true" 
            class="search-form"
            label-width="100px"
          >
            <!-- 赛事名称和时间范围 -->
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="赛事名称">
                  <el-input 
                    v-model="store.searchForm.event_name" 
                    placeholder="请输入赛事名称"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="时间范围">
                  <el-date-picker
                    v-model="store.dateRange"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 赔率范围 -->
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="主队赔率范围">
                  <el-col :span="11">
                    <el-input-number 
                      v-model="store.searchForm.home_initial_min" 
                      placeholder="最小值"
                      :min="0"
                      :precision="2"
                      :step="0.01"
                      controls-position="right"
                      style="width: 100%"
                    />
                  </el-col>
                  <el-col :span="2" class="text-center">-</el-col>
                  <el-col :span="11">
                    <el-input-number 
                      v-model="store.searchForm.home_initial_max" 
                      placeholder="最大值"
                      :min="0"
                      :precision="2"
                      :step="0.01"
                      controls-position="right"
                      style="width: 100%"
                    />
                  </el-col>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="平局赔率范围">
                  <el-col :span="11">
                    <el-input-number 
                      v-model="store.searchForm.draw_initial_min" 
                      placeholder="最小值"
                      :min="0"
                      :precision="2"
                      :step="0.01"
                      controls-position="right"
                      style="width: 100%"
                    />
                  </el-col>
                  <el-col :span="2" class="text-center">-</el-col>
                  <el-col :span="11">
                    <el-input-number 
                      v-model="store.searchForm.draw_initial_max" 
                      placeholder="最大值"
                      :min="0"
                      :precision="2"
                      :step="0.01"
                      controls-position="right"
                      style="width: 100%"
                    />
                  </el-col>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="客队赔率范围">
                  <el-col :span="11">
                    <el-input-number 
                      v-model="store.searchForm.away_initial_min" 
                      placeholder="最小值"
                      :min="0"
                      :precision="2"
                      :step="0.01"
                      controls-position="right"
                      style="width: 100%"
                    />
                  </el-col>
                  <el-col :span="2" class="text-center">-</el-col>
                  <el-col :span="11">
                    <el-input-number 
                      v-model="store.searchForm.away_initial_max" 
                      placeholder="最大值"
                      :min="0"
                      :precision="2"
                      :step="0.01"
                      controls-position="right"
                      style="width: 100%"
                    />
                  </el-col>
                </el-form-item>
              </el-col>
            </el-row>
            
            <!-- 操作按钮 -->
            <el-row>
              <el-col :span="24" style="text-align: center">
                <el-button type="primary" @click="store.handleSearch" :loading="store.loading">
                  <el-icon><Search /></el-icon>
                  查询
                </el-button>
                <el-button @click="store.handleReset">
                  <el-icon><Refresh /></el-icon>
                  重置
                </el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-collapse-transition>
    </el-card>

    <!-- 表格区域 -->
    <el-card class="table-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span>查询结果</span>
          <span class="total-info" v-if="store.total > 0">
            共 {{ store.total }} 条记录
          </span>
        </div>
      </template>

      <div class="table-container">
        <el-table 
          :data="store.tableData" 
          v-loading="store.loading"
          stripe
          style="width: 100%"
          :expand-row-keys="store.expandedRowKeys"
          row-key="fid"
          ref="tableRef"
          :height="tableHeight"
          :row-class-name="store.tableRowClassName"
        >
          <el-table-column type="expand" width="2">
            <template #default="{ row }">
              <div class="analysis-expand-content">
                <Europe18wAnalysisDetail :match-data="row" />
              </div>
            </template>
          </el-table-column>
          
          <el-table-column prop="event_name" label="赛事名称" min-width="100" />
          <el-table-column prop="order_num" label="比赛编号" min-width="100" />
          <el-table-column prop="matchtime" label="比赛时间" min-width="120" />
          <el-table-column prop="ownerdate" label="归属时间" min-width="100" />
          <el-table-column prop="homesxname" label="主队名称" min-width="100" />
          <el-table-column prop="awaysxname" label="客队名称" min-width="100" />
          <el-table-column prop="homescore" label="主队得分" min-width="80" />
          <el-table-column prop="awayscore" label="客队得分" min-width="80" />
          <el-table-column prop="home_initial" label="主队初赔" min-width="80" />
          <el-table-column prop="draw_initial" label="平局初赔" min-width="80" />
          <el-table-column prop="away_initial" label="客队初赔" min-width="80" />
          <el-table-column label="最值状态" min-width="80">
            <template #default="{ row }">
              <span v-if="row.is_setting_range === 1">已设最值</span>
            </template>
          </el-table-column>
          
          <!-- 操作 -->
          <el-table-column label="操作" min-width="120" fixed="right">
            <template #default="{ row }">
              <el-button 
                type="primary" 
                size="small" 
                @click="store.toggleAnalysis(row)"
              >
                {{ row.showAnalysis ? '收起分析' : '合理性分析' }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <!-- 分页 -->
        <div class="pagination-wrapper" v-if="store.total > 0">
          <el-pagination
            :current-page="store.currentPage"
            :page-size="store.searchForm.page_size"
            :page-sizes="[10, 20, 50, 100]"
            :total="store.total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="store.handleSizeChange"
            @current-change="store.handleCurrentChange"
          />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, computed } from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue'
import { ElTable } from 'element-plus'
import { useEurope18wStore } from '@/pinia/stores/europe18wStore'
import Europe18wAnalysisDetail from './components/Europe18wAnalysisDetail.vue'

// 使用 store
const store = useEurope18wStore()

// 表格高度 - 固定高度以确保 proper layout
const tableHeight = computed(() => {
  return 500  // 固定高度 to ensure pagination visibility
})

// 生命周期
onMounted(() => {
  // 初始化数据，包括设置默认时间范围和初始查询
  store.initializeData()
})
</script>

  <style scoped>
.same-europe-18w-page {
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.search-card {
  margin-bottom: 20px;
}

.table-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.total-info {
  color: #909399;
  font-size: 14px;
}

.search-form {
  padding: 20px 0;
}

.text-center {
  text-align: center;
  line-height: 32px;
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.analysis-expand-content {
  padding: 20px;
  background-color: #f5f7fa;
  margin: 10px 0;
  border-radius: 4px;
  overflow: visible; /* 确保內容完全可见 */
  max-width: 100%; /* 防止內容溢出 */
  font-family: inherit; /* 使用相同字体 */
  font-size: 14px; /* 与表格字体大小保持一致 */
}

.table-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 600px; /* 确保容器有足够的最小高度 */
}

/* 表格样式 */
:deep(.el-table .el-table__header th) {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 600;
  font-size: 14px;
  font-family: inherit;
}

:deep(.el-table .el-table__row) {
  transition: background-color 0.3s;
}

:deep(.el-table .el-table__row:hover > td) {
  background-color: #f5f7fa;
}

:deep(.el-table td), :deep(.el-table th) {
  padding: 8px 0;
  text-align: center;
  font-size: 14px;
  font-family: inherit;
}

:deep(.el-table td.el-table__cell) {
  border-bottom: 1px solid #ebeef5;
}

/* 隐藏默认的展开图标 */
:deep(.el-table__expand-icon) {
  display: none;
}

/* 确保展开行样式正确 */
:deep(.el-table__expanded-cell) {
  padding: 0 !important;
  background-color: transparent;
  overflow: visible; /* 确保展开內容可见 */
}

/* 设置表格容器最大高度，允许滚动 */
:deep(.el-table) {
  max-height: calc(100vh - 300px); /* 调整为适合屏幕的高度 */
  overflow-y: auto;
  font-family: inherit;
}

/* 表格行背景色 - 根据 is_setting_range 字段设置 */
:deep(.el-table .row-effective) {
  background-color: #e6f7ee !important; /* 浅绿色背景表示最值有效 */
}

/* 标题字体样式 */
:deep(.el-card__header) {
  font-family: inherit;
  font-weight: 600;
  font-size: 16px;
}
</style>
